<template>
  <div ref="div"
       class="onekit-movable-view"
       :class="onekitClass"
       :style="
      onekitStyle +
      ';left:' +
      x +
      'px !important;' +
      ';top:' +
      y +
      'px !important;'
    "
       :id="onekitId">
    <slot></slot>
  </div>
</template>

<script>
import $ from "jquery";
import "jquery-ui-dist/jquery-ui";
import "@andxor/jquery-ui-touch-punch-fix";
import weixin_behavior from "../../behaviors/weixin_behavior";
import onekit_behavior from "../../behaviors/onekit_behavior";
export default {
  name: "onekit-movable-view",
  mixins: [weixin_behavior, onekit_behavior],
  props: {
    direction: {
      type: String,
      default: "none",
    },
    intertia: {
      type: [Boolean, String],
      default: false,
    },
    "out-of-bounds": {
      type: [Boolean, String],
      default: false,
    },
    // eslint-disable-next-line vue/require-prop-type-constructor
    x: [String, Number],
    // eslint-disable-next-line vue/require-prop-type-constructor
    y: [String, Number],
    damping: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: [String, Number],
      default: 20,
    },
    friction: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: [String, Number],
      default: 2,
    },
    disabled: [Boolean, String],
    scale: [Boolean, String],
    "scale-min": {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: [String, Number],
      default: 0.5,
    },
    "scale-max": {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: [String, Number],
      default: 10,
    },
    "scale-value": {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: [String, Number],
      default: 1,
    },
    animation: {
      type: [Boolean, String],
      default: true,
    },
  },
  watch: {
    direction (value) {
      this.direction_(value);
    },
    intertia (value) {
      this.intertia_(value);
    },
    outOfBounds (value) {
      this["out-of-bounds_"](value);
    },
    damping (value) {
      this.damping_(value);
    },
    friction (value) {
      this.friction_(value);
    },
    disabled (value) {
      this.disabled_(value);
    },
    scale (value) {
      this.scale_(value);
    },
    scaleMin (value) {
      this["scale-min_"](value);
    },
    scaleMax (value) {
      this["scale-max_"](value);
    },
    scaleValue (value) {
      this["scale-value_"](value);
    },
    animation (value) {
      this.animation_(value);
    },
  },
  methods: {
    mix_disabled (direction, disabled) {
      $(this.$refs.div).draggable(
        "option",
        "disabled",
        direction == "none" || disabled
      );
    },
    direction_ (direction) {
      this.mix_disabled(direction, this.disabled);
      if (direction === "none") {
        return;
      }
      switch (direction) {
        case "all":
          break;
        case "vertical":
          $(this.$refs.div).draggable("option", "axis", "y");
          break;
        case "horizontal":
          $(this.$refs.div).draggable("option", "axis", "x");
          break;
        default:
          throw new Error();
      }
    },
    // eslint-disable-next-line no-unused-vars
    intertia_ (value) {
      // console.log(value)
    },
    "out-of-bounds_" () {
      //  console.warn('[OneKit] out-of-bounds is not surport!!')
    },
    damping_ () {
      //  console.warn('[OneKit] damping is not surport!!')
    },
    friction_ () {
      //   console.warn('[OneKit] damping is not surport!!')
    },
    disabled_ (disabled) {
      this.mix_disabled(this.direction, disabled);
    },
    scale_ () { },
    "scale-min_" () {
      // console.warn('[OneKit] damping is not surport!!')
    },
    "scale-max_" () {
      //  console.warn('[OneKit] damping is not surport!!')
    },
    "scale-value_" () {
      //  console.warn('[OneKit] damping is not surport!!')
    },
    animation_ (animation) {
      $(this.$refs.div).draggable({ animate: animation });
    },
  },
  created () { },
  mounted () {
    $(this.$refs.div).draggable({ containment: "parent" });
    // eslint-disable-next-line no-unused-vars
    $(this.$refs.div).on("drag", (event, ui) => {
      const web_position = ui.position;
      this.$emit("Change", {
        detail: { x: web_position.left, y: web_position.top },
      });
    });
    ///////////////
    this.direction_(this.direction);
    this.intertia_(this.intertia);
    this["out-of-bounds_"](this["out-of-bounds"]);
    //this.x_(this.x)
    //this.y_(this.y)
    this.damping_(this.damping);
    this.friction_(this.friction);
    this.disabled_(this.disabled);
    this.scale_(this.scale);
    this["scale-min_"](this["scale-min"]);
    this["scale-max_"](this["scale-max"]);
    this["scale-value_"](this["scale-value"]);
    this.animation_(this.animation);
  },
};
</script>
